<template>
  <Sider
    ref="sideRef"
    breakpoint="lg"
    collapsible
    :class="getSiderClass"
    :width="210"
    :collapsed="false"
    :collapsed-width="48"
    :theme="`dark`"
    :trigger="null"
    @breakpoint="onBreakpointChange"
  >
    <LayoutMenu />
  </Sider>
</template>

<script lang="ts" setup>
import { Layout } from 'ant-design-vue'
import { computed, h, ref, unref } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
import LayoutMenu from '@/layouts/default/menu/index.vue'

defineOptions({ name: 'LayoutSideBar' })
const Sider = Layout.Sider
const sideRef = ref<ElRef>(null)
const { prefixCls } = useDesign('layout-sideBar')
const getSiderClass = computed(() => {
  return [
    prefixCls,
    {
      [`${prefixCls}--fixed`]: true,
    }
  ]
})

const onBreakpointChange = (flag) => {
  console.log(flag, 'onBreakpointChange')
}
</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-layout-sideBar';

.@{prefix-cls} {
}
</style>
